<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 15px;
            margin: 160px auto;

        }
        .box input{
            margin: 10px 0;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="box">
        <form class="form-horizontal" role="form" action="/register" method="post">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">名字</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入名字">
                    <span id="tip"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="submit" type="submit" class="btn btn-default">注册</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(function (){
            $("#username").blur(function (){
                if(!$("#username").val()){
                    $("#tip").html("用户不能为空").css("color","red");
                    $("#submit").prop("disabled", true);
                } else {
                    $.ajax({
                        type: "post",
                        url: "/checkName",
                        data: {
                            "username": $("#username").val()
                        },
                        success: function (res) {
                            if (res == 'true') {
                                $("#tip").html("用户已存在").css("color", "red");
                                $("#submit").prop("disabled", true);
                            } else {
                                $("#tip").html("可以").css("color", "green");
                                $("#submit").prop("disabled", false);
                            }
                        }
                    })
                }
            })

        })
    </script>
</body>
</html>
